<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed设置</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <label>Legs: <input v-model="legCount" type="range"></label>
    <label>Tops: <input @input="update" :value="tableCount"></label><br />

    <output>
        我们将构建{{legCount}}脚本和程序集{{tableCount}}表。
    </output>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            legCount: 0
        },
        computed:{
            tableCount: {
                get (){
                    return this.legCount / 4;
                },
                set (newValue){
                    this.legCount = newValue * 4;
                }
            }
        },
        update(e){
            this.tableCount = e.target.value;
        }
    })
</script>
</body>
</html>